<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="asserts/dist/css/layui.css">
    <script type="text/JavaScript" src="asserts/dist/layui.js" charset="utf-8"></script>
    <script src="asserts/js/jquery-2.1.1.min.js"></script>
    <link href="asscerts/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
    <script src="asscerts/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <title>店铺订单</title>
    <style>
        .navbar-inverse{
            height: 35px;
            font-size: 6px;
        }
        #a2{
            padding-top: 7px;
            margin-top: 0px;
            padding-right:0px;
            color: #eb9e9b
        }
        #a2:hover{
            color: #eb565f;
        }
        #div1{
            /*border: red solid 1px;*/
            height: 80px;
            width: 910px;
            margin-left: 192px;
            margin-top: 10px;
        }
        #div2{
            overflow: hidden;
            /*border: red solid 1px;*/
            float: left;
            height: 80px;
            width: 150px
        }
        #div3{
            /*border: red solid 1px;*/
            float: left;
            margin-left: 20px;
            font-size: 18px;
            height: 80px;
            width: 350px;
            font-weight:500;
            color: #4a4a4a;
            padding-top: 25px;
            font-family:微软雅黑;
        }
        .span1{
            /* 鼠标移入变小手 */
            cursor: pointer;

        }
        .span1:hover{
            font-weight: bold;
        }
        .form-group{
            /*border: red solid 1px;*/
            height: 80px;
            width: 300px;
            padding-top: 22px;
            float: right;
            color: #FFFFFF;

        }
        #button_id{
            float: right;
            width: 70px;
            height: 34px;
            background-color: #ff6e39;
            border: 0px;
            border-radius: 4px;
            box-shadow: 0px 0px 5px #888888;
        }
    </style>
</head>

<body>
<nav class=" navbar-inverse">
    <div class="container-fluid" >
        <!-- Brand and toggle get grouped for better mobile display -->
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class=""><a href="#" style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
                <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
                <li><a href="#" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"   style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">数码电子</a></li>
                        <li><a href="#">食品</a></li>
                        <li><a href="#">生活用品</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">服装 | 男装 | 女装</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">厨具用品</a></li>
                    </ul>
                </li>
            </ul>
            <!--  <form class="navbar-form navbar-left">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="Search">
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
              </form>-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"  id="a2">亲，请登录</a></li>
                <li><a href="#" style="padding-top: 7px;margin-top: 0px;">注册</a></li>
                <li><a href="#"  style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车<span style="color: #eb9e9b">0</span></a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<table class="layui-hide" id="test" lay-filter="test">
</table>

<script type="text/html" id="toolbarDemo">
    <div>
        <div class="demoTable">
            搜索订单：
            <div class="layui-inline">
                <input class="layui-input" name="keyword" id="demoReload" autocomplete="off" placeholder="输入订单号">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
        <!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
        <!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
        <!--        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" >详情</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="createTime">

    {{dateFormat(d.createTime) }}
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'order/selectAllStoreOrderByUserId'
            ,parseData: function(res){ //res 即为原始返回的数据
                //判断返回数据
                console.log(res.data)
                if(res.data == null){
                    //显示无数据提示内容
                    return {
                        "code": 201, //解析接口状态
                        "msg": '无数据' //解析提示文本
                    };
                }
                return {
                    "code":0, //解析接口状态
                    "msg": "", //解析提示文本
                    "count": res.data.length, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print'//自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            ]
            ,title: '用户数据表'
            ,limit:10//每页显示的条数（默认 10）。值需对应 limits 参数的选项。注意：优先级低于 page 参数中的 limit 参数
            ,limits:[10,20,30,40,50]
            ,id: 'testReload'
            ,statusCode:200//成功的状态码，默认：0
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'orderNumber', title:'订单编号', fixed: 'left', unresize: true}
                ,{field:'totalPrice', title:'订单总价', sort: true}
                //订单状态：1超时关闭、2待支付、3已支付未发货、4待收货、5待评价、6订单完成
                ,{field:'status', title:'订单状态',templet: function (d) {
                        if(d.status == 1){
                            status = "超时关闭"
                        }else if(d.status == 2){
                            status = "待支付"
                        }else if(d.status == 3){
                            status = "已支付未发货"
                        }else if(d.status == 4){
                            status = "待收货"
                        }else if(d.status == 5){
                            status = "待评价"
                        }else if(d.status == 6){
                            status = "订单完成"
                        }
                        return status;
                    }}
                ,{field:'createTime', title:'订单生成时间',templet: '#createTime'}
                // ,{field:'remark', title:'备注'}
                ,{field:'recipient', title:'收货人'}
                ,{field:'tel', title:'电话'}
                // ,{field:'address', title:'地址'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]]
            ,page: true,
        });
        //搜索
        $('.layui-btn').click(function () {
            var inputVal = $('.layui-input').val()
            table.reload('testReload', {
                url: 'order/selectOrderNumberLikeByStore'
                // ,methods:"post"
                ,request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,where: {
                    orderNumber : inputVal
                }
                ,page: {
                    curr: 1
                }
            });
        })

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;


            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var util = layui.util
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('确定删除?', function(index){
                    obj.del();
                    console.log(index)
                    console.log(obj)
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: "order/stroeDelOrderByOrderId",
                        data: {
                            orderNumber:obj.data.orderNumber
                        },
                        type: "POST",
                        dataType: "json",
                        success: function(res) {
                            console.log(res.msg)
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                console.log(obj.data)
                window.location.href="storeOrderDetails.html?id="+obj.data.id
                // var value = obj.value //得到修改后的值
                //     ,data = obj.data //得到所在行所有键值
                //     ,field = obj.field; //得到字段
                // layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
            }
        });
    });
</script>

</body>

</html>